<template>
  <UserFormLayout :title="title">
    <template #middle>
      <a-spin :spinning="loading" style="min-height:200px">
        <div class="helpContent" v-html="helpContent"></div>
      </a-spin>
    </template>
    <template #bottomBtns>
      <a-button type="primary"  @click="clickFeedBack">
        {{ '问题反馈' }}
      </a-button>
      <a-button  @click="clickBack">
        {{ $t('back') }}
      </a-button>
    </template>
  </UserFormLayout>
</template>

<script>
import UserFormLayout from './UserFormLayout'
export default {
  name: 'HelpInstructions',
  components: {UserFormLayout},
  data () {
    return {
      helpContent: '',
      loading: false,
      title: ''
    }
  },
  mounted () {
    this.getHelpInstructionsInfo()
  },
  methods: {
    clickBack () {
      this.$router.push({ path: '/user/welcome' })
    },  
    clickFeedBack () {
      this.$router.push({ path: '/user/question', query:{loginType: 'OA'} })
    },
    // 获取帮助说明
    getHelpInstructionsInfo () {
      this.loading = true;
      this.$api.getHelpInstructions().then((res) => {
        this.title = res.data.title
        this.helpContent = res.data.note
      }).finally(() => this.loading = false)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
